<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Your deck.js Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="core/deck.core.css">

<!-- Extension CSS files go here. Remove or add as needed. -->
<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">

<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">

<!-- Basic black and white print styles -->
<link rel="stylesheet" media="print" href="core/print.css">

<!-- Required Modernizr file -->
<script src="modernizr.custom.js"></script>
<style>
  .demoimage{float:right;width:40%;height: 90%;overflow:auto;margin-right: 50px}
</style>
</head>
<body>
  <div class="deck-container">

    <!-- Begin slides. Just make elements with a class of slide. -->

    <section class="slide">
      <h1>利用jQuery制作相册</h1>
    </section>

    <section class="slide">
      <div class="demoimage">
        <div><img src="pic/js.png"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h3>课程回顾</h3>
        <h3>相册项目效果展示</h3>
        <h3>环境准备</h3>
        <h3>实现步骤</h3>
        <h3>作业说明</h3>
      </div>
    </section>



    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>课程回顾</h2>
        <ol>
          <li><h3>jQuery选择器</h3>
            <p>CSS3的属性选择器</p>,
          </li>
          <li><h3>jQuery Object与Dom对象的转换</h3>
            <p>为什么要转换？</p>
            <p>.get(n)、[n]、eq(n)</p>
          </li>
          <li><h3>jQuery Object对象的筛选过滤</h3></li>
          <li><h3>$符号的几种用法</h3>
          </li>
        </ol>
      </div>
    </section>
    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
      <h2>相册项目效果展示</h2>
      <p> 05 alburm project</p>
    </div>
    </section>


    <section class="slide">

      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>环境准备</h2>
        <ol>
          <li>下载jquery</li>
          <li>准备文档以供查阅</li>
          <li>编写页面</li>
          <li>抽离js与css样式文件</li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>实现步骤</h2>
        <ol>
          <li>动态列出所有图片的缩略图</li>
          <li>根据图片的大小添加不同的背景</li>
          <li>添加单击图片事件弹出层</li>
          <li>设置弹出层中的图片样式</li>
          <li>设置弹出层中的图片样式</li>
          <li>...</li>
        </ol>

      </div>
    </section>


    <section class="slide">
      <h1>Thanks, You're dismissed!</h1>
    </section>


    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="jquery-1.11.3.js"></script>
<script src="core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>
